<template>
	<div class="register-container">
		<div class="register-form">
			<van-form @submit="onSubmit">
				<van-field label="用户" v-model="regForm.name" type="text" placeholder="请输入用户"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效用户名' }]" />
				<van-field label="密码" v-model="regForm.password" type="password" placeholder="请输入密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
				<van-field label="确认" v-model="regForm.password2" type="password" placeholder="请确认密码"
					:rules="[{ pattern:regNamePwd,required: true, message: '无效密码' }]" />
				<van-field label="邮箱" v-model="regForm.email" type="email" placeholder="请输入邮箱"
					:rules="[{ pattern:regEmail, message: '无效邮箱' }]" />
				<van-field label="电话" v-model="regForm.phone" type="tel" placeholder="请输入电话"
					:rules="[{ pattern:regPhone, message: '无效手机号码' }]" />
				<van-field name="radio" label="性别">
					<template #input>
						<van-radio-group v-model="regForm.gender" direction="horizontal">
							<van-radio :name="1">男</van-radio>
							<van-radio :name="0">女</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field label="昵称" v-model="regForm.nick_name" type="text" placeholder="请输入昵称" />
				<van-field name="uploader" label="头像">
					<template #input>
						<van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
					</template>
				</van-field>
				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit" class="submit-btn">提交</van-button>
				</div>
			</van-form>
			<div class="content-padded">
				<p class="register-tip">注册成功后的用户可用于登录</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { showToast } from 'vant';
	import { registerAPI, uploadAvatarAPI } from "@/api/user.js";
	import { setUserLocal } from '@/utils/auth'
	export default {
		data() {
			return {
				regForm: { //表单中的字段名与数据库中用户表的字段名要求一致
					name: "",
					password: "",
					password2: "",
					email: "",
					phone: "",
					gender: 1,
					avatar: "",
					nick_name: ""
				},
				avatarList: [],
				//规则:字母数字‘6~12        
				regNamePwd: /^[a-z0-9]{3,12}$/i,
				regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
				regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
			};
		},
		methods: {
			//手动处理文件上传
			afterRead(file) {
				file.status = 'uploading';
				file.message = '上传中...';
				uploadAvatarAPI(file.file).then(result => {
					file.status = '';
					file.message = '';
					//重新生成显示的图片url
					this.avatarList = [];
					this.avatarList.push({
						url: this.APIDomainName + result.url
					})
					//设置用户表中的字段值
					this.regForm.avatar = result.url;
				});
			},
			//处理提交保存
			onSubmit() {
				if (this.regForm.password != this.regForm.password2) {
					showToast("密码两次输入不一致");
					return;
				}
				//注意传递过去的参数user的属性名
				let user = this.regForm;
				delete user.password2; //删除该临时的字段
				registerAPI(user).then(result => {
					setUserLocal(result.data.user);
					this.$router.push({
						name: "login"
					});
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.register-container {
		background-color: #f8f4e8; /* 旧书纸张的米黄色背景 */
		min-height: 100vh;
		padding: 20px;
		padding-top: 76px;
	}
	
	.register-form {
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 10px rgba(139, 87, 42, 0.1); /* 棕色阴影 */
	}
	
	.submit-btn {
		background-color: #8b572a; /* 深棕色主题按钮 */
		border: none;
		font-weight: bold;
	}
	
	.submit-btn:hover {
		background-color: #a06a3a; /* 悬停时稍亮的棕色 */
	}
	
	.content-padded {
		margin: 30px;
		text-align: center;
	}
	
	.register-tip {
		color: #666;
		font-size: 14px;
	}
	
	/* 自定义字段样式 */
	/deep/ .van-field__label {
		color: #5a4a42; /* 深棕色标签 */
	}
	
	/deep/ .van-radio__icon--checked .van-icon {
		background-color: #8b572a;
		border-color: #8b572a;
	}
	
	/deep/ .van-uploader__upload {
		background-color: #f0e6d2; /* 浅棕色上传区域 */
	}
</style>